<template>
	<div>
		<div class="container">
			<div class="handle-box">
				<!-- <el-input v-model="query.Enc" placeholder="车位编码" class="handle-input mr10"></el-input> -->
				<el-input v-model="query.NumberPlate" placeholder="车牌号" class="handle-input mr10"></el-input>
				<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
				<el-button type="primary"  :icon="Plus" @click="handleAdd">新增</el-button>
				<el-button type="primary" :icon="Search" @click="btnExport">导出</el-button>

			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="ID" label="ID" width="55" align="center"></el-table-column>
				<el-table-column prop="NumberPlate" label="车牌号"></el-table-column>
                <el-table-column prop="NickName" label="车主"></el-table-column>
                <el-table-column prop="Enc" label="车位"></el-table-column>
                <el-table-column prop="IsPlay" label="是否支付">
                    <template #default="scope">
                         {{scope.row.IsPlay==1?'支付':'未支付'}}
                    </template>
                </el-table-column>
                <el-table-column prop="IsOutBound" label="是否出库">
                    <template #default="scope">
                         {{scope.row.IsOutBound==1?'出库':'未出库'}}
                    </template>
                </el-table-column>
                <el-table-column prop="PlaceMemory" label="停车费"></el-table-column>

                <el-table-column prop="PlaceStartTime" label="入库时间"></el-table-column>
                <el-table-column prop="PlaceStopTime" label="出库时间"></el-table-column>
                
				<el-table-column prop="CreateTime" label="创建时间"></el-table-column>
				<el-table-column prop="UpdateTime" label="修改时间"></el-table-column>
				<el-table-column label="操作" width="220" align="center">
					<template #default="scope">
						<el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)" v-permiss="15">
							编辑
						</el-button>
						<el-button text :icon="Delete" class="red" @click="handleDelete(scope.row.ID)" v-permiss="16">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:total="pageTotal"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog :title="title" v-model="editVisible" width="30%">
			<el-form label-width="70px">
                <el-form-item label="id">
					<el-input type="number" v-model="form.ID" disabled></el-input>
				</el-form-item>
                <el-form-item label="车位编码">
					<el-input  v-model="form.Enc"></el-input>
				</el-form-item>
                 <el-form-item label="停车费">
					<el-input type="number" step="0.01" v-model.number="form.PlaceMemory"></el-input>
				</el-form-item>
                 <el-form-item label="车牌号">
					<el-input  v-model="form.NumberPlate"></el-input>
				</el-form-item>
                 <el-form-item label="入库时间">
                     <el-form-item prop="date1">
                            <el-date-picker
                                type="datetime"
                                placeholder="选择日期"
                                v-model="form.PlaceStartTime"
                                style="width: 100%"
                            ></el-date-picker>
                        </el-form-item>
				</el-form-item>
                <el-form-item label="出库时间">
                    <el-form-item prop="date1">
                            <el-date-picker
                                type="datetime"
                                placeholder="选择日期"
                                v-model="form.PlaceStopTime"
                                style="width: 100%"
                            ></el-date-picker>
                        </el-form-item>
				</el-form-item>
				  <el-form-item label="车主">
					<el-select v-model.number="form.UserID" placeholder="选择车主" class="handle-select mr10">
					    <el-option v-for="(item,index) in userOption" 
							 v-bind:key="index"
							:label="item.NickName"
							:value="Number(item.ID)"></el-option>
					  
			    	</el-select>
                </el-form-item>
                <el-form-item label="是否出库">
					<el-select v-model.number="form.IsOutBound" placeholder="状态" class="handle-select mr10">
					    <el-option key="1" label="已出库" :value="Number(1)"></el-option>
					    <el-option key="2" label="未出库" :value="Number(2)"></el-option>
			    	</el-select>
                </el-form-item>

                <el-form-item label="是否支付">
					<el-select v-model.number="form.IsPlay" placeholder="状态" class="handle-select mr10">
					<el-option key="1" label="已支付" :value="Number(1)"></el-option>
					<el-option key="2" label="未支付" :value="Number(2)"></el-option>
				</el-select>
                </el-form-item>
                
                <!-- <el-form-item label="更新时间">
					<el-input  v-model="form.UpdateTime" disabled></el-input>
				</el-form-item>
                
				<el-form-item label="创建时间">
					<el-input v-model="form.CreateTime" disabled></el-input>
				</el-form-item> -->
               
				
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="editVisible = false">取 消</el-button>
					<el-button type="primary" @click="submitForm">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus, User } from '@element-plus/icons-vue';
import { Car,List,Add,Update,DeleteCar } from '../../api/car';
import {List as UserList,User as UserInfo} from  '../../api/user/user'
import {exportExcel} from '../../utils/export'

const btnExport=()=>{
	let queryCopy=Object.assign({},query);
	queryCopy.pageIndex=1;
	queryCopy.pageSize=100000;
	List(queryCopy).then(res=>{
		res.data.Data.forEach(row => {
			row.PaidPrice=undefined;
			row.IsPlay=row.IsPlay?'支付':'未支付'
			row.IsOutBound=row.IsOutBound?'出库':'未出库'
		});
		exportExcel({
			json: res.data.Data,
			name: '表格',
			titleArr: ['停车时间','出库时间','停车费','车主','车位编码','创建时间','编号','车牌号','修改时间','用户id','是否出库','是否支付'],
			sheetName: 'sheet1',
		})
	})
}
const title=ref('')

const query = reactive({
    UserId:0,
	PlaceId:0,   //车位id
	PlaceStartTime:undefined, //停车时间
	NumberPlate:'' ,   //车牌号
	pageIndex: 1,
	pageSize: 10
});
const tableData = ref<Car[]>([]);
const pageTotal = ref(0);
// 获取表格数据
const getData = () => {
	List(query).then(res => {
		tableData.value = res.data.Data;
		pageTotal.value = res.data.TotalNumber || 50;
	});
};
getData();

// 查询操作
const handleSearch = () => {
	query.pageIndex = 1;
	getData();
};
// 分页导航
const handlePageChange = (val: number) => {
	query.pageIndex = val;
	getData();
};

// 删除操作
const handleDelete = (id: number) => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	})
		.then(() => {
			DeleteCar(id).then(res=>{
                ElMessage.success('删除成功');
                getData()
            })
		})
		.catch(() => {});
};

// 表格编辑时弹窗和保存
const editVisible = ref(false);
const userOption=ref([])
let form = ref<Car>({} as Car);
let idx: number = -1;
const getOption=()=>{
	UserList({}).then(res=>{
		userOption.value=res.data.Data;
	})
}
const handleEdit = (index: number, row: any) => {
	form.value=Object.assign({},row)
    title.value='编辑'
	editVisible.value = true;
};
const handleAdd = () => {
    form.value={} as Car
    title.value='添加'
	editVisible.value = true;
};
const submitForm = () => {
    if(title.value=='编辑'){
        Update(form.value as Car).then(Res=>{
             
			ElMessage.success('操作成功');
			 getData()
        })
    }else{
        Add(form.value as Car).then(Res=>{
			ElMessage.success('操作成功');
             getData()
        })
    }

     editVisible.value = false;
};
getOption();
</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #F56C6C;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>
